<template>
	<view class="list">
		<!-- <nav-bar class="i_top" isBack title="3D体验馆"></nav-bar> -->
		<nav-bars class="i_top" fontColor="#000" title="3D体验馆"></nav-bars>
		<!-- 筛选框 -->
		<view class="l_top" :class="{'isOver': selectIsOver}" :style="'top:'+navHeight+'px;'">
			<!-- 轮播 -->
			<view class="bannerBox">
				<view class="swpierBox">
					<swiper indicator-dots autoplay interval="3000" indicator-color="rgba(255,255,255,0.5)"
						indicator-active-color="#fff" circular>
						<swiper-item class="swiper" v-for="(item,index) in bannerList" :key="index">
							<image :src="item.img" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="l_tFilt">
				<view class="l_tText" @tap="selectToggle">
					<view class="l_tIcon" :class="{'active': selectBox}"></view>
					<text>{{selectText ? selectText : '筛选'}}</text>
				</view>
			</view>

			<view class="l_tPop" :class="{'active': selectBox}" @touchmove.stop.prevent="moveHandle">
				<view class="l_tBg" @tap="selectToggle"></view>
				<view class="l_tBox">
					<view class="l_search">
						<view class="l_sList">
							<view class="l_sItem">
								<view class="l_sLabel">户型</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
											<view class="l_sTag" v-for="(item, index) in bedroom" :key="index"
												:class="{'active': selectroom === item.value}"
												@tap="selectTag('selectroom', item.value, item.name)">{{item.name}}
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">面积</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
											<view class="l_sTag" v-for="(item, index) in area_section" :key="index"
												:class="{'active': selectArea === item.value}"
												@tap="selectTag('selectArea', item.value, item.name)">{{item.name}}
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<!-- <view class="l_sItem">
								<view class="l_sLabel">风格</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
												<view class="l_sTag" v-for="(item, index) in design_style" :key="index" :class="{'active': selectStyle === item.id}" @tap="selectTag('selectStyle', item.id, item.name)">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">预算</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
												<view class="l_sTag" v-for="(item, index) in budget_section" :key="index" :class="{'active': selectFee === item.value}" @tap="selectTag('selectFee', item.value, item.name)">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view> -->

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="l_search">
			<view class="l_sList" id="searchBox">
				<view class="l_sItem">
					<view class="l_sLabel">户型</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" v-for="(item, index) in bedroom" :key="index"
									:class="{'active': selectroom === item.value}"
									@tap="selectTag('selectroom', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">面积</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" v-for="(item, index) in area_section" :key="index"
									:class="{'active': selectArea === item.value}"
									@tap="selectTag('selectArea', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="l_sItem">
					<view class="l_sLabel">风格</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
									<view class="l_sTag" v-for="(item, index) in design_style" :key="index" :class="{'active': selectStyle === item.id}" @tap="selectTag('selectStyle', item.id, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">预算</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
									<view class="l_sTag" v-for="(item, index) in budget_section" :key="index" :class="{'active': selectFee === item.value}" @tap="selectTag('selectFee', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view> -->

			</view>
		</view>


		<view class="l_data">
			<view class="l_dContain">
				<view class="l_dCan">
					<!-- 装修案例 -->
					<view class="l_dList">
						<view class="l_dDemo">
							<view class="no-card" v-if="demoList.length==0">
								<image src="https://manager.ryz1620.com/static/my/sm.png"></image>
								<text>暂无案例~</text>
							</view>
							<view class="i_dItem" v-for="(items, index) in demoList" :key="items.id"
								@click="viwerurl(items)">
								<view class="s_tit">{{items.title}} | {{items.area}}m² | {{items.house_type}}</view>
								<view class="s_tops">
									<view class="ts_left">
										<image :src="items.house_thumb_url[0].path"></image>
									</view>
									<view class="ts_right">
										<view class="i_tBtn">
											<view class="i_tbImg iconfont iconhuaban33"></view>
											<view class="i_tbTxt">3D</view>
										</view>
										<view class="i_tSwiper">
											<view class="i_tCont">
												<image :src="items.thumb_url[0].path"></image>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_desginview from '@/service/desginview'
	import service_design from '@/service/design'

	export default {
		data() {
			return {
				baseImg: this.$static,
				demoList: [],
				// 筛选框
				selectTop: 0,
				budget_section: [],
				area_section: [],
				design_style: [],
				tab: 1,
				bedroom: [{
						id: 1,
						name: "一室",
						value: "1"
					},
					{
						id: 2,
						name: "二室",
						value: "2"
					},
					{
						id: 3,
						name: "三室",
						value: "3"
					},
					{
						id: 4,
						name: "四室",
						value: "4"
					},
					{
						id: 5,
						name: '五室',
						value: 5,
					},
					{
						id: 6,
						name: "五室及以上",
						value: "5,20"
					}
					// {
					// 	id: 5,
					// 	name: "复式",
					// 	value: "6,10"
					// },
					// {
					// 	id: 6,
					// 	name: "别墅",
					// 	value: "10,20"
					// }
				],
				selectIsOver: false,
				selectArea: '',
				selectStyle: '',
				selectroom: '',
				selectFee: '',
				selectText: '',
				selectBox: false,
				house_id: '',
				currentPage: 1,
				estate_id: null, //小区id
				is_display: 0,
				bannerList: [],
			}
		},

		computed: {
			navHeight() { // Nav栏高度
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			},
		},

		// components: {
		// 	navBar
		// },

		onLoad(params) {
			this.$utils.getUrl()
			// console.log(params);
			if (params) {
				console.log(params);
				this.house_id = params.house_id
				// this.getList(params.house_id)
			} 

			this.getOptions()
			this.getList()
			this.getBannerList()
		},

		onReady() {
			let _this = this

			// 获取筛选框高度
			let Query = uni.createSelectorQuery()
			Query.select("#searchBox").boundingClientRect(data => {
				if (data.height) _this.selectTop = data.height
			}).exec()
		},

		onPageScroll(e) {
			if (this.selectTop && e.scrollTop > this.selectTop) {
				if (!this.selectIsOver) this.selectIsOver = true
			} else {
				if (this.selectIsOver) this.selectIsOver = false
			}
		},
		onReachBottom() {
			this.currentPage++
			this.getList()
		},
		methods: {
			viwerurl(item) {
				let url = encodeURIComponent(item.display_url)
				uni.navigateTo({
					url: '/pages_3D/pages/3D/panorama?url=' + url
				});
			  // if(item.light_design_id){
				 // uni.navigateTo({
				 // 	url: '/pages_3D/pages/3D/degin?obsEasyDesignId=' + item.light_design_id
				 // }); 
			  // }else{
				  
			  // }	
				
			},
			tabtop(e) {
				this.tab = e
				if (e == 1) {
					this.is_display == 0
				} else {
					this.is_display == 1
				}
				this.currentPage = 1
				this.selectArea = ''
				this.selectStyle = ''
				this.selectroom = ''
				this.selectFee = ''
				this.selectText = ''
				this.demoList = []
				this.getList()
			},
			// 获取筛选条件
			getOptions() {
				service_design.getOptionList()
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							this.budget_section = data.budget_section
							this.area_section = data.area_section
							this.design_style = data.design_style
						}
					})
			},

			// 获取数据列表
			getList() {
				let params = {
					bedroom_num: this.selectroom,
					house_id:this.house_id,
					area: this.selectArea,
					page: this.currentPage,
					pagesize: 15,
					is_light_design: 1
				}
				service_design.getDemoList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							// 处理数据
							for (let i = 0; i < data.length; i++) {
								this.demoList.push(data[i])
							}
						}
					})
			},
			toDetail(caseId) {
				uni.navigateTo({
					url: '/pages_design/pages/design/demo/demo?caseId=' + caseId
				})
			},

			// bannder获取
			getBannerList() {
				service_design.getbanner({
					type: '30'
				}).then(res => {
					console.log(res, 'banner')
					if (res.code == 1) {
						this.bannerList = res.data ? res.data : []
					}
				})
			},

			// 筛选框==
			// 选择筛选条件
			selectTag(type, id, name) {
				if (this[type] !== id) {
					this[type] = id
					let selectText = ''
					console.log(type)
					// 户型
					let selectroom = this.selectroom
					let selectroomList = this.bedroom
					if (selectroom !== null) {
						for (let i = 0; i < selectroomList.length; i++) {
							if (selectroomList[i].id === selectroom) {
								selectText += selectroomList[i].name + ' | '
								break
							}
						}
					}
					// 面积
					let selectArea = this.selectArea
					let selectAreaList = this.area_section
					if (selectArea !== null) {
						for (let i = 0; i < selectAreaList.length; i++) {
							if (selectAreaList[i].id === selectArea) {
								selectText += selectAreaList[i].name + ' | '
								break
							}
						}
					}
					// 风格
					let selectStyle = this.selectStyle
					let selectStyleList = this.design_style
					if (selectStyle !== null) {
						for (let i = 0; i < selectStyleList.length; i++) {
							if (selectStyleList[i].id === selectStyle) {
								selectText += selectStyleList[i].name + ' | '
								break
							}
						}
					}
					// 预算
					let selectFee = this.selectFee
					let selectFeeList = this.budget_section
					if (selectFee !== null) {
						for (let i = 0; i < selectFeeList.length; i++) {
							if (selectFeeList[i].id === selectFee) {
								selectText += selectFeeList[i].name + ' | '
								break
							}
						}
					}
					this.selectText = selectText.slice(0, selectText.length - 2)
				} else {
					if (type == 'selectArea') {
						this.selectArea = ''
					} else if (type == 'selectStyle') {
						this.selectStyle = ''
					} else if (type == 'selectFee') {
						this.selectFee = ''
					} else {
						this.selectroom = ''
					}
				}
				this.currentPage = 1
				this.demoList = []
				this.getList()
			},

			// 展示隐藏筛选框
			selectToggle() {
				if (this.selectIsOver) {
					this.selectBox = !this.selectBox
				}
			},

			moveHandle() {},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.list {
		min-height: 100vh;
		background: #fff;
	}

	.list .i_top {
		position: relative;
		z-index: 100;

		.i_tCan {
			width: 100%;
			height: 66rpx;
			padding-left: 50rpx;
			padding-right: 50rpx;

			view {
				display: inline-block;
				width: 50%;
				text-align: center;
				line-height: 66rpx;
				position: relative;
			}

			.active {
				text {
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -20rpx;
					display: block;
					width: 40rpx;
					height: 8rpx;
					border-radius: 8rpx;
					background: #FFD425;
				}
			}
		}

	}

	// 輪播圖
	.bannerBox {
		width: 100%;
		height: 180rpx;
		position: fixed;
		background-color: #fff;
		left: 0;
		z-index: 10;

		.swpierBox {
			width: 686rpx;
			margin: 0 auto;
			height: 180rpx;
			border-radius: 8rpx;

			.swiper {
				border-radius: 8rpx;
			}

			image {
				width: 686rpx;
				height: 180rpx;
				border-radius: 8rpx;
			}
		}
	}


	// 筛选框=====
	.l_top {
		width: 100vw;
		height: 80rpx;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 3;

		&.isOver {
			box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .16);
		}

		.l_tFilt {
			height: 100%;
			background: #fff;
			position: relative;
			z-index: 2;
			top: 180rpx;
		}

		.l_tText {
			height: 80rpx;
			line-height: 80rpx;
			color: #a98f68;
			font-size: 24rpx;
			padding: 0 24rpx 0 40rpx;
			position: relative;
			float: left;
		}

		.l_tIcon {
			margin-top: -4rpx;
			border: 8rpx solid transparent;
			border-top-color: #a58f6d;
			position: absolute;
			top: 50%;
			right: 0;
			transition: transform .3s;
			transform: rotate(0);
			transform-origin: 50% 25%;

			&.active {
				transform: rotate(180deg);
				transform-origin: 50% 25%;
			}
		}

		.l_tPop {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			visibility: hidden;
			transition: visibility .3s;

			&.active {
				visibility: visible;

				.l_tBg {
					opacity: 1;
				}

				.l_tBox {
					transform: translateY(0);
				}
			}
		}

		.l_tBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			opacity: 0;
			transition: opacity .3s;
		}

		.l_tBox {
			width: 100%;
			position: absolute;
			top: 0px;
			transition: transform .3s;
			transform: translateY(-100%);
		}
	}

	.list .l_search {
		padding-top: 80rpx;
		background: #fff;
		position: relative;
		z-index: 2;
		top: 90px;

		.l_sList {
			padding: 20rpx 0 20rpx 40rpx;
		}

		.l_sItem {
			height: 50rpx;
			margin-top: 20rpx;

			&:nth-child(1) {
				margin-top: 0;
			}
		}

		.l_sLabel {
			line-height: 52rpx;
			font-weight: bold;
			padding-right: 40rpx;
			float: left;
		}

		.l_sVal {
			height: 50rpx;
			overflow: hidden;
		}

		.l_sCan {
			height: 80rpx;
			overflow-x: auto;
		}

		.l_sTags {
			white-space: nowrap;
		}

		.l_sTag {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			padding: 0 20rpx;
			display: inline-block;

			&.active {
				color: #a98f68;
				border-radius: 26rpx;
				background: #f9f6f3;
			}

			&:nth-last-child(1) {
				margin-right: 20rpx;
			}
		}
	}


	// 数据列表（案例、动态、评价）=====
	.list .l_data {
		padding-top: 170rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 数据列表
	.list .l_data .l_dList {
		background: #fff;
		padding: 0 30rpx;
	}

	// 设计案例 底线
	.list .l_data .l_dDemo .l_ddItem {
		position: relative;

		&::after {
			content: "";
			height: 1px;
			background: #f4f4f4;
			position: absolute;
			bottom: 0;
			left: 32rpx;
			right: 32rpx;
			transform: scaleY(.5);
		}

		&:nth-last-child(1)::after {
			content: none;
		}
	}

	// 装修案例
	.list .l_data .l_dDemo {
		padding: 0rpx 0 40rpx;

		.l_ddItem {
			padding: 42rpx 0 40rpx;

			&:nth-child(1) {
				padding-top: 0;
			}
		}

		.l_ddBanner {
			height: 376rpx;
			margin: 0 32rpx;
			border-radius: 8rpx;
			background: #f0f0f0;
			overflow: hidden;
			position: relative;
		}

		.l_ddInfo {
			line-height: 34rpx;
			font-size: 24rpx;
			margin: 18rpx 32rpx 0;
		}

		.l_ddTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 20rpx;
			margin-top: -2rpx;
			margin-right: 16rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			float: left;
		}

		.l_ddCont {
			overflow: hidden;
		}

		.l_ddVal {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.l_ddCutLine {
			width: 1px;
			height: 12rpx;
			margin: 0 8rpx;
			background: #333;
			display: inline-block;

			&:nth-last-child(1) {
				display: none;
			}
		}

		.l_ddRemark {
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			padding-left: 36rpx;
			margin-top: 8rpx;
		}
	}

	.i_tBtn {
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.i_tbImg {
		margin: 5rpx auto 0;
		font-size: 38rpx;
		color: #fff;
		text-align: center;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 20rpx;
		position: absolute;
		top: 40rpx;
		left: 0;
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
		background-color: #fff;
	}

	.no-card image {
		height: 240rpx;
		width: 240rpx;
		padding: 40rpx;
	}

	.i_dItem {
		margin: 20rpx 0;
		box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
	}

	.s_tops {
		position: relative;
		padding-left: 220rpx;

		.ts_left {
			position: absolute;
			width: 200rpx;
			height: 200rpx;
			left: 0;
			top: 0;
			border-radius: 10rpx;
			border: 1px #CCCCCC solid;
			overflow: hidden;
		}

		.ts_right {
			border-radius: 10rpx;
			position: relative;
			overflow: hidden;

			image {
				height: 420rpx;
			}
		}
	}

	.i_tSwiper {
		height: 200rpx;
		position: relative;
	}

	.s_tit {
		line-height: 80rpx;
		margin-top: 20rpx;
		font-weight: 600;
		position: relative;

		text {
			position: absolute;
			background: #F6F7FB;
			height: 60rpx;
			line-height: 60rpx;
			width: 140rpx;
			text-align: center;
			right: 0;
			top: 10rpx;
			border-radius: 8rpx;
		}
	}
</style>
